<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login Success</title>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/css/bootstrap/bootstrap-theme.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <style>
        @font-face{
            font-family: QS-R;
            src:url(/font/Quicksand-Regular.ttf);
        }

        @font-face{
            font-family: QS-M;
            src:url(/font/Quicksand-Medium.ttf);
        }

        @font-face{
            font-family: QS-L;
            src:url(/font/Quicksand-Light.ttf);
        }

        @font-face{
            font-family: QS-B;
            src:url(/font/Quicksand-Bold.ttf);
        }

        @font-face{
            font-family: QS-SB;
            src:url(/font/Quicksand-SemiBold.ttf);
        }
        .inner-window {
            width: 500px;
            margin: 0 auto;
            text-align: center;

        }
        .input{
            width: 285px;
            height: 60px;
            font-family:QS-M;
            font-size: 25px;
            color: black;
            background-color:rgba(157,157,157,.15);
            background-position: 15px;
            background-repeat: no-repeat;
            background-size: 35px 35px;
            border:none;
            border-radius: 8px;
        }
        .button:hover{
            cursor: pointer;
        }
        .button {
            width:126px;
            height:40px;
            color:white;
            background-color:#004aad;
            border:none;
            border-radius:8px;
            font-family:QS-M;
            font-size: 20px;
        }
        .inner-window .button-bar {
            margin-top: 50px;
            margin-left: 357px;
        }
        .button:active{
            background-color: darkblue;
        }
        .text::-webkit-input-placeholder{
            font-family: QS-R;
            text-align: left;
            font-size: 20px;
        }
        .text{
            margin-top:20px;
            padding-left:20px;
            font-family: QS-R;
        }

        .inner-window .button-button-bar {
            margin-top: 50px;
            margin-left: 240px;
        }

        .inner-window .week {
            margig: 0;
            padding-left: 20px;
            width: 180px;
            height: 60px;
            font-family: QS-M;
            font-size: 25px;
            color: black;

            border: none;
            border-radius: 8px;
        }

        .inner-window .start-time {
            margig: 0;
            padding-left: 20px;
            font-family: QS-R;
            width: 80px;
            height: 60px;
            font-family: QS-M;
            font-size: 25px;
            color: black;

            border: none;
            border-radius: 8px;
        }

        .inner-window .end-time {
            margig: 0;
            padding-left: 20px;
            font-family: QS-R;
            width: 80px;
            height: 60px;
            font-family: QS-M;
            font-size: 25px;
            color: black;

            border: none;
            border-radius: 8px;
        }
        .time-bar {
            height: 80px;
            line-height: 80px;
        }
        .inner-window .add-icon-bar {
            height: 80px;
            width: 48px;
            padding: 24px;

        }
        .inner-window .add-icon-bar .add-icon{
            position:absolute ;
            left:50% ;
            margin-left: -24px;
            top:50% ;
            margin-top: -24px;
        }

        *{
            list-style: none;

        }
    </style>
</head>
<body style="width:100%">
<div class="login inner-window" th:object="${session.currentLoginUser}">
    <div align="center">
        <img src="/image/LOGO.png" style="width:222px;height:114px;">
    </div>
    <div id="courseInfo-bar" style="margin-top: 80px;">
        <input type="hidden" id="uniId" name="uniId" th:value="*{uniId}">
        <input type="hidden" id="userId" name="uniId" th:value="*{userId}">
        <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;margin-right: 50px">Course ID</span>
        <input type="text" id="courseId" name="courseId" class="input text" placeholder="Please Enter the course ID"><br/>
        <div id="err-msg" style="color: red;display: none"></div>
        <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;">Course group</span>
        <input type="text" id="courseGroup" name="courseGroup" class="input text" placeholder="Please Enter the group"><br/>

        <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;margin-right: 17px;">Course code</span>
        <input type="text" id="coursePassword" name="coursePassword" class="input text" placeholder="Please Enter the code"><br/>
        <div class="button-bar" style="margin-left: 236px;">
            <input type="button" class="button back" Value="Back" onclick="document.location='/accountInfo'">
            <input type="button" id="submit" class="button back" Value="Submit">
        </div>

    </div>
    </div>




</div>
<script>
    // $('#next').click(function () {
    //     $.ajax({
    //         url:"/course/isCourseExists",
    //         dataType:"JSON",
    //         data:{
    //             courseId:document.getElementById("courseId").value,
    //             courseGroup:document.getElementById("courseGroup").value,
    //             uniId:document.getElementById("uniId").value
    //         },
    //         method:"GET",
    //         success:function (data) {
    //             if (data.code===true){
    //                 //不存在
    //                 $("#err-msg").html("The current course does not exist")
    //                 document.getElementById("err-msg").style.display="block";
    //             }else {
    //                 //存在
    //             }
    //         }
    //     })
    //
    //
    // })

    // $("#back").click(function () {
    //     $("#courseInfo-bar").toggle()
    //     $("#courseCode-bar").toggle();
    // })

    $("#submit").click(function() {
        $.ajax({
            url:"/course/doJoinCourse",
            dataType: "JSON",
            data:{
                userId:document.getElementById("userId").value,
                courseId:document.getElementById("courseId").value,
                courseGroup:document.getElementById("courseGroup").value,
                uniId:document.getElementById("uniId").value,
                coursePassword:document.getElementById("coursePassword").value,
            },
            method:"POST",
            success:function (data) {
                if (data.code===true){
                    document.location = data.location;
                }else {
                    alert(data.errMsg)
                }
            }
        })
    })


    // $(".dropdown li a").click(function (event) {
    //     console.log(event.currentTarget)
    //     $(event.currentTarget).parents(".dropdown-menu").prev().html($(event.currentTarget).html())
    //     $(event.currentTarget).parents(".dropdown-menu").prev().attr("value",$(event.currentTarget).html())
    // })
    //
    // $(".add-icon-bar").click(function (event) {
    //     $("#courseCode-bar .time-bar:last").after($("#courseCode-bar .time-bar:last").clone(true));
    //     $(event.currentTarget).attr("hidden",true);
    // })




</script>
</body>
</html>